<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link href="../../cssmui/mui.min.css" rel="stylesheet" />
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" />
		<link href="../../css/mylist.css" rel="stylesheet" />
		<link href="../../css/app.css" rel="stylesheet" />
		<script src='../../js/vue.min.js'></script>
		<script src="../../mui/mui.min.js"></script>
		<script src="../../mui/mui.picker.min.js"></script>
		<script src='../../js/jsondb.js'></script>
	
		<script src="../../js/app.js"></script>

		<script src="../../js/loadpicker.js"></script>
		<script src="chart/chartservices.js"></script>
		<style type="text/css">
			.mui-bar-popover {
				width: 30%;
			}
			
			.mui-popover {
				height: 190px;
			}
		</style>
	</head>

	<body>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<h4 style="margin: 10px;">搜索条件</h4>
						<hr>
						<form>
							<div style="margin: 10px;">
								<input type="text" class="mui-input-clear" name="contact" id="contact" extenddata="" value="" placeholder="选择交易方" />
								<input type="text" class="mui-input-clear" name="startdate" id="startdate" value="" placeholder="开始时间" />
								<input type="text" class="mui-input-clear" name="enddate" id="enddate" value="" placeholder="结束时间" />
							</div>
							<div style="margin: 10px;">
								<span id="offCanvasHide" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-left">关闭</span>
								<span id="clearsearchinput" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-left">清空</span>
								<span id="searchsubmit" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-right">查找</span>
							</div>
						</form>
					</div>
				</div>
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
					<a id="offCanvasShow" href="#" class="mui-icon-extra mui-icon-extra-filter mui-pull-right"></a>
					<h1 class="mui-title">往来</h1>
				</header>
				<div id="offCanvasContentScroll" style="margin-bottom:50px" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll ">
						<div class="mui-card  mui-card-content mui-media " id="infobtn">
							<div id="info_div" class="mui-card-content-inner mui-h5">
								<div class="mui-media-body">
									<p class='mui-ellipsis '>{{name}}</p>
								</div>{{dstr}}
								<br> 累计交易额：<span class="text-num text-size2">￥{{samout}}</span>
								<br>
								<template v-if="pors==''||pors==1"> 累计应付款：
									<span class="text-num-down text-size2">￥{{payable}}</span><br></template>
								<template v-if="pors==''||pors==2"> 累计利润：
									<span class="text-num-up text-size2">￥{{profit}}</span>
									<br> 累计应收款：<span class="text-num-up text-size2">￥{{receivable}}</span>
									<br></template>
							</div>
							<div class="subscript">点 </div>
						</div>
						<ul id="rslist" class="mui-table-view">
							<li v-for="e in list" class="mui-table-view-cell " style="padding:4px; background-color: {{rowid%2==1?'#edffff':'#fbffff'}} ;" data-tag="{{e._idkey}}">
								<div class="mui-row">
									<div class="mui-table-cell mui-col-sm-4 mui-col-xs-4" style="padding-left: 5px;padding-top: 5px;">
										<p class="mui-ellipsis" style="color:#777777"> {{e.monnum}}</p>
										<span class="mui-ellipsis2 mui-h4" style="color:#777777">{{e.uname}}</span>
									</div>
									<div class="mui-table-cell mui-col-sm-8 mui-col-xs-8" style="padding-left: 5px;padding-top: 5px;">
										<p class="mui-ellipsis" style="color:#555555"> 月成交额：
											<span class="text-num text-size2">￥{{e.samout}}</span>
											<template v-if="e.receivable>0"><br>应收款：
												<span class="text-num-up text-size2">￥{{e.receivable}}</span>
												<br>月利润：<span class="text-num-up text-size2">￥{{e.profit}}</span> </template>
											<template v-if="e.payable>0"><br> 应付款：
												<span class="text-num-down text-size2">￥{{e.payable}}</span></template>
										</p>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<footer class="mui-bar mui-bar-footer">
					<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-left">图例</a>
					<a href="all" class="mui-btn mui-btn-link mui-pull-right">所有</a>
					<a href="kh" class="mui-btn mui-btn-link mui-pull-right">客户</a>
					<a href="gys" class="mui-btn mui-btn-link mui-pull-right">供应商</a>

				</footer>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<div id="bottomPopover" class="mui-popover mui-popover-bottom">
			<div class="mui-popover-arrow"></div>
			<div>
				<ul class="mui-table-view">
					<li param="btam" class="chartlink mui-table-view-cell ">
						往来购销情况</li>
					<li param="bxsu" class="chartlink mui-table-view-cell">
						客户消费排名</li>
					<li param="bxsm" class="chartlink mui-table-view-cell">
						客户消费规律</li>
					<li param="pxsu" class="chartlink mui-table-view-cell ">
						客户消费占比</li>
				</ul>
			</div>
			<!--mui-media mui-col-xs-6 mui-col-sm-6-->
		</div>
		<script src="../../js/myoffcanvas.js"></script>

		<script type="text/javascript">
			/**
			 * 
			 */
			//--------表单属性
			var _PORS = "";
			var _statusname = '';
			//------------------声明 定义-------------
			var targetTab = ['echarts.html'];
			var _tagtitle = null;
			//-----------初始化
			//app.js
			function afterPlusReady() {
				var self = _self;
				mui.init();
				setPors(self.pors);
			}

			mui.ready(function() {
				//---------------------事件-------------
				//------列表事件----------
				//点击单元格后弹出
				//				mui("#offCanvasContentScroll").on('tap', '.mui-table-view-cell', function() {
				//					var did = this.getAttribute("data-tag")
				//				
				//					open(targetTab[0], {
				//						selectedid: did,
				//						pors: _PORS
				//					});
				//				})
				//搜索条件改变后,明细返回后
				window.addEventListener('bechanged', function(e) {　 //获取参数值	
					//console.log('bechanged：'+e.detail.reload);					
					if(e.detail.reload == 'list') //更新明细列表
					{
						refresh();
					}
				});
				//........上拉事件...............
				window.addEventListener("swipeup", function() {
					//console.log("_flag" + _flag)
					if(_flag == 1) {
						pullRefresh()
						var scroll = mui('#offCanvasContentScroll').scroll();
						//重新计算布局值，最大滚动的高度等等
						scroll.reLayout();
						//滚动到底部
						scroll.scrollToBottom(100);
					}
					//console.log('swipeup')
				});
				var _flag = 0;
				//滚动后
				G('offCanvasContentScroll').addEventListener('scrollend', function(e) {
					//console.log(_flag + ' ' + e.detail.y + '  ' + e.detail.maxScrollY)
					_flag = 0;
					if(e.detail.y <= e.detail.maxScrollY) {
						_flag = 1
					}
				});
				//------------按钮事件--------------	
				mui(".mui-bar-footer").on("tap", "a", function() {
					var href = this.getAttribute("href")
					if(href == "kh") {
						setPors('2');
					} else if(href == "gys") {
						setPors('1');
					} else if(href == "all") {
						setPors('');
					}
					//						mui("#bottomPopover").popover('show');
					//					 if (eventname == "chart"){
					//						open(targetTab[0], {	
					//							chart:'ta',
					//							where1:getwhere(),
					//							where2:{cg:_PORS}
					//						});
					//					}

				});
				//-------------------------------
				mui("#bottomPopover").on("tap", "li", function() {
					blur();

					var eventname = this.getAttribute("param")
					if(eventname == 'bxsu' || eventname == 'bxsm' || eventname == 'pxsu')
						setPors('2');
					else
						setPors('');
					var where = {
						chart: eventname,
						where1: getwhere(),
						where2: {
							cg: _PORS
						}
					};

					console.log(JSON.stringify(where))
					mui("#bottomPopover").popover('hide');
					open(targetTab[0], where);
				});
				//------------搜索表单事件--------------	
				G('offCanvasHide').addEventListener('tap', function() {
					document.activeElement.blur();
					offCanvasWrapper.offCanvas('close');
				});
				G('searchsubmit').addEventListener('tap', function(e) {
					refresh();
					document.activeElement.blur();
					offCanvasWrapper.offCanvas('close');
				});
				G('clearsearchinput').addEventListener('tap', function(e) {
					G('contact').value = ''
					G('contact').extenddata = ''
					G('startdate').value = ''
					G('enddate').value = ''
					document.activeElement.blur();
				});
				G('infobtn').addEventListener('tap', function(e) {
					t = this;
					if(t.style.height == "")
						t.style.height = "80px"
					else
						t.style.height = ""
				});
				//-------------监听事件----------
				//监听数据改变的事件,选择供应商以后会改变部分字段
				//console.log('244 iolist')
			});

			//多用途: 程序标签
			function setPors(p) {
				//console.log(p);
				_PORS = p;
				var _tagtitle = null;
				switch(_PORS) {
					case '1':
						_tagtitle = ['采购情况'];
						break;
					case '2':
						_tagtitle = ['销售情况'];
						break;
					default:
						_tagtitle = ['综合'];
				}
				loaddict();
				refresh();
				if(_tagtitle)
					mui('header .mui-title')[0].innerHTML = _tagtitle[0] + '分析';
			}
			//----------载入字典--------------
			var DICT_contact = null;
			//搜索和关联用
			function loaddict() {
				var _tb_contacts = new XCDBHelp('tb_contacts');
				if(DICT_contact) return;
				var qs = _tb_contacts.where({
					"status": 1,
					"cgroup": _PORS
				}).getList();
				//log(qs, 'purchase_list201')
				//console.log("qs:"+JSON.stringify(qs));
				DICT_contact = _AW.select(qs, 'uname:text,_idkey:value,pysx:py,cgroup:cg');
				//console.log("DICT_contact"+JSON.stringify(DICT_contact));
				loadPicker('contact', DICT_contact);
				loadDateTimePicker('startdate', 'month')
				loadDateTimePicker('enddate', 'month')
			}

			//----------------------载入数据-----------------------
			//----------数据转模版-----------

			//---------------查询语句-------------		
			function getwhere() {
				var q1 = _FF.getM('contact');
				var q2 = _FF.getV('startdate').replaceAll('-', '')
				var q3 = _FF.getV('enddate').replaceAll('-', '');
				var where = {
					"cid": q1.value, //不指定 
					"monnum[": q2,
					"monnum]": q3
				};
				return where;
			}

			function queryList() {
				//log(wheres, 'purchaselist273')
				var where = getwhere();
				//console.log(JSON.stringify(where))
				//console.log('arr.lengh'+arr.length)
				var arr2 = queryTa(where, {
					cg: _PORS
				});
				//console.log(JSON.stringify(arr2))
				setCard(arr2);
				return arr2;
			}
			var vi1 = null;
			//汇总统计 ，所有人的应收款
			function setCard(arr) {
				var cnt = {
					name: '',
					mans: 0,
					dstr: '',
					receivable: 0,
					payable: 0,
					profit: 0,
					samout: 0,
					income: 0,
					expend: 0
				}
				cnt.pors = _PORS || '';
				var mans = [];
				var monnum1 = '';
				var monnum2 = '';
				//console.log("学习型:"+JSON.stringify(arr))
				for(var i = 0; i < arr.length; i++) {
					var m = arr[i];
					///console.log(arr.length+' '+JSON.stringify(m))
					if(monnum1 > m.monnum || monnum1 == '')
						monnum1 = m.monnum;
					if(monnum2 < m.monnum || monnum2 == '')
						monnum2 = m.monnum;
					if(indexOfArray(mans, m.uname) < 0)
						mans.push(m.uname);
					cnt.receivable = round2(m.receivable, 3);
					cnt.payable = round2(m.payable, 3);
					cnt.profit += round2(m.profit, 3);
					cnt.samout += round2(m.samout, 3);
					cnt.income += round2(m.income, 3);
					cnt.expend += round2(m.expend, 3);
				}

				cnt.mans = mans.length;
				cnt.name = mans.join(',')

				//console.log("学习型:"+ cnt.name)
				if(monnum1 != '' && monnum1 == monnum2)
					cnt.dstr = '在' + monnum1 + "月份";
				else if(monnum1 == "" && monnum2 != "")
					cnt.dstr = "截至" + monnum2 + "月份";
				else if(monnum1 != "" && monnum2 == "")
					cnt.dstr = "从" + monnum1 + "月份开始";
				else if(monnum1 != "" && monnum2 != "")
					cnt.dstr = monnum1 + "-" + monnum2 + "月份"
				if(vi1 == null) {
					vi1 = new Vue({
						el: '#info_div',
						data: cnt
					});
				}

			}
			//-----------刷新查询结果-------------
			var vi2 = null;

			function refresh() {
				if(vi2 == null) {
					vi2 = new Vue({
						el: '#rslist',
						data: {
							list: queryList()
						}
					});
				}
				//刷新滚动到顶部
				mui('#offCanvasContentScroll').scroll().scrollTo(0, 0, 100);
				//	console.log('dddd');
			}

			//---------页面准备-----------
		</script>
	</body>

</html>